<template>
  <div>
    <el-dialog v-model="dialogVisible" title="新增药品" width="500" :before-close="handleClose">
      <span>
        <el-form ref="ruleFormRef" class="demo-form-inline" :model="ruleForm" :rules="rules">
          <el-form-item label="药品名称：" prop="name">
            <el-input v-model="ruleForm!.name" clearable />
          </el-form-item>
          <el-form-item label="数量：" prop="counts" style="padding-left: 28px">
            <el-input v-model="ruleForm!.counts" clearable style="width: 49%" />
            <el-select v-model="ruleForm!.unit" style="width: 49%; margin-left: 6px" clearable>
              <el-option label="盒" value="盒" />
              <el-option label="粒" value="粒" />
            </el-select>
          </el-form-item>
          <el-form-item label="有效期：" prop="expTime" style="padding-left: 14px">
            <el-date-picker
              v-model="ruleForm!.expTime"
              format="YYYY-MM-DD"
              type="datetime"
              value-format="YYYY-MM-DD"
              placeholder="请选择"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="剂量：" prop="sum" style="padding-left: 28px">
            <el-input v-model="ruleForm!.sum" clearable style="width: 49%" />
            <el-select v-model="ruleForm!.norms" style="width: 49%; margin-left: 6px" clearable>
              <el-option label="盒" value="盒" />
              <el-option label="粒" value="粒" />
            </el-select>
          </el-form-item>
          <el-form-item label="服法：" prop="remarks" style="padding-left: 28px">
            <el-input v-model="ruleForm!.remarks" type="textarea" />
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="sure(ruleFormRef)">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, defineEmits, defineProps } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox, FormInstance, FormRules } from "element-plus";
import { AddParams } from "@/api/medicalcare/medicinelogs/type";
import { getDrugsDetail, updateDrugs } from "@/api/medicalcare/medicinelogs/medicinelogs";

const router = useRouter();
const ruleFormRef = ref();

const emit = defineEmits(["close"]);
const props = defineProps({
  currentData: Object,
  currentId: Number,
});

const ruleForm = reactive<AddParams>({
  id: 0,
  name: "",
  counts: undefined,
  unit: "盒",
  expTime: "",
  sum: undefined,
  norms: "粒",
  remarks: "",
});

//规则
const rules = reactive<FormRules<AddParams>>({
  name: [
    {
      required: true,
      message: "请输入药品名称",
      trigger: "blur",
    },
  ],
  counts: [
    {
      required: true,
      message: "请输入数量",
      trigger: "blur",
    },
  ],
  expTime: [
    {
      required: true,
      message: "请选择有效期",
      trigger: "change",
    },
  ],
  sum: [
    {
      required: true,
      message: "请输入剂量",
      trigger: "blur",
    },
  ],
  remarks: [
    {
      required: true,
      message: "请输入服法",
      trigger: "blur",
    },
  ],
});
//dialog默认显示
const dialogVisible = ref(true);

//取消
const handleClose = () => {
  emit("close");
};

//确定
const sure = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (props.currentData?.id) {
        emit("close", ruleForm);
      } else if (ruleForm.id) {
        //修改
        await updateDrugs(ruleForm);
        ElMessage({
          message: "编辑成功",
          type: "success",
        });
        emit("close", true);
      } else {
        //添加
        emit("close", ruleForm);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

//获取单条存药信息
const getDetail = async (id: number) => {
  let res = await getDrugsDetail(id);
  Object.assign(ruleForm, res);
};

onMounted(() => {
  if (props.currentData) {
    Object.assign(ruleForm, props.currentData);
  }
  if (props.currentId) {
    getDetail(props.currentId);
  }
});
</script>

<style scoped></style>
